<template>
    <el-row :gutter="20">
        <el-col :span="6">
            <el-tree :data="deptTreeData" :props="defaultProps" highlight-current
                     @node-click="handleNodeClick"></el-tree>
        </el-col>
        <el-col :span="18">
            <el-form :model="searchForm" :label-position="$store.labelPosition" label-width="20%">
                <el-form-item label="用户名：" >
                    <el-input v-model="searchForm.userId" placeholder="请输入用户名"></el-input>
                </el-form-item>

                <el-form-item label="姓名：">
                    <el-input v-model="searchForm.empName" placeholder="请输入姓名"></el-input>
                </el-form-item>

                <el-form-item label="性别：">
                    <el-radio-group v-model="searchForm.sex">
                        <el-radio :label="sex.code" v-for="sex in sexList">{{sex.description}}</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="searchEmpsByCriteria()">查询</el-button>
                    <el-button type="edit" icon="el-icon-plus" @click="gotoAddEmp()">添加</el-button>

                </el-form-item>
            </el-form>

            <table-mixin pagination paginationAlign="left" :paginationTotal="paginationTotal"
                         :pageChange="pageChange">
                <el-table v-loading="tableData.loading" :data="tableData.body"
                          stripe border style="width:100%">

                    <el-table-column label="用户名" prop="userId" min-width="15%"></el-table-column>
                    <el-table-column label="姓名" prop="empName" min-width="15%"></el-table-column>
                    <el-table-column label="性别" prop="sexDesc" min-width="10%"></el-table-column>
                    <el-table-column label="出生日期" prop="birth" min-width="20%" ></el-table-column>

                    <el-table-column label="操作" class-name="centerCell" min-width="22%">
                        <template slot-scope="scope">
                            <el-button type="edit" size="small" icon="el-icon-edit"
                                       @click="gotoEditEmp(scope.row.id)">编辑</el-button>
                            <el-button type="primary" size="small" icon="el-icon-view"
                                       @click="gotoViewEmp(scope.row.id)">查看</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </table-mixin>
        </el-col>
    </el-row>
</template>

<script>
    import { mapState, mapActions } from 'vuex'

    export default {
        name: "EmpSearch",
        data() {
            return {
                searchForm: {
                    userId: "",
                    empName: "",
                    sex: "",
                    deptId: ""
                },
                dept:{
                    id: -1,
                    parentId: "",
                    deptName: "",
                    orderNum: 1,
                    effortType: "",
                    effortWeight: ""
                },
                currentPage: 1,
                paginationTotal: 0,

                tableData: {
                    loading: true,
                    body: []
                },
            }
        },

        mounted() {
            this.searchEmpsByCriteria();
        },

        methods: {

            searchEmpsByCriteria(){
                this.currentPage = 1;
                this.searchEmpList();
            },

            // 获取table数据
            async searchEmpList() {
                console.log(`当前第${this.currentPage}页`);
                let res = await this.$axios.get('/hr/emp/list', {
                    pageSize: this.$store.state.pageSize,
                    pageNo: this.currentPage,
                    userId: this.searchForm.userId,
                    empName: this.searchForm.empName,
                    sex: this.searchForm.sex,
                    deptId: this.searchForm.deptId
                });

                console.log("返回员工列表：", res);
                this.tableData.loading = false;
                this.tableData.body = res.rows;
                this.paginationTotal = res.total;
            },

            pageChange(currentPage) {
                this.currentPage = currentPage;
                this.searchEmpList();
            },

            handleNodeClick(data){
                this.searchForm.deptId = data.id;
                this.searchEmpList();
            },

            gotoAddEmp(){
                this.$store.commit("emp/Init_Add_Emp_Page")
            },

            gotoEditEmp(empId){
                this.$store.commit("emp/Init_Edit_Emp_Page", empId)
            },

            gotoViewEmp(empId){
                this.$store.commit("emp/Init_View_Emp_Page", empId)
            }

        },

        computed: {
            ...mapState({
                sexList: state => state.emp.sexList,
                deptTreeData: state => state.dept.deptTreeData,
                defaultProps: state => state.dept.defaultProps,
            })
        }

    }
</script>

